<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>login.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<link rel="stylesheet" type="text/css"
			href="../css/default/easyui.css"></link>
		<link rel="stylesheet" type="text/css" href="../css/icon/icon.css"></link>
		<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}
</style>
		<script type="text/javascript" src="../js/json/json2.js">
</script>
		<script type="text/javascript" src="../js/easyui/jquery-1.7.1.min.js">
</script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js">
</script>
		<script type="text/javascript">
$(function() {
	$('#dg').datagrid( {
		title : '应用系统列表',
		iconCls : 'icon-edit',//图标 
		width : "700px",
		height : "500px",
		nowrap : false,
		striped : true,
		border : true,
		collapsible : false,//是否可折叠的 
		fit : true,//自动大小 
		url : '../user!findAllUser.action',
		singleSelect : false,//是否单选 
		pagination : true,//分页控件 
		rownumbers : true,//行号
		fitColumns : true
	});
	//这里只是为了验证后台JSON格式字符串到前台处理是否正常
	/*$("#dg").datagrid("getPager").pagination( {
		onSelectPage : function(pageNumber, pageSize) {
			$.post("../user!findAllUser.action", {
				"page" : pageNumber,
				"rows" : pageSize
			}, function(result) {
				//为安全起见，此处不用eval(result);
				$("#dg").datagrid("loadData", JSON.parse(result));
			});
		}
	});*/
});
function newUser() {
	$('#dlg').dialog('open').dialog('setTitle', '新增用户');
	$('#fm').form('clear');
	url = '../user!saveUser.action';
}

function eidtUser() {
	var row = $('#dg').datagrid('getSelected');
	if (row) {
		$('#dlg').dialog('open').dialog('setTitle', '编辑用户');
		$('#fm').form('load', row);
		url = '../user!editUser.action?id=' + row.id;
	}
}

function saveUser() {
	$('#fm').form('submit', {
		url : url,
		onSubmit : function() {
			return $(this).form('validate');
		},
		success : function(result) {
			result = JSON.parse(result);
			if (result.success) {
				$('#dlg').dialog('close'); // close the dialog  
		$('#dg').datagrid('reload'); // reload the user data  
	} else {
		$.messager.show( {
			title : 'Error',
			msg : result.msg
		});
	}
}
	});
}

function removeUser() {
	var row = $('#dg').datagrid('getSelected');
	if (row) {
		$.messager.confirm('Confirm', '确定删除此用户?', function(r) {
			if (r) {
				$.post('../user!removeUser.action', {
					id : row.id
				}, function(result) {
					//result = JSON.parse(result);
						if (result.success) {
							$('#dg').datagrid('reload'); // reload the user data  
					} else {
						$.messager.show( { // show error message  
									title : 'Error',
									msg : result.msg
								});
					}
				}, 'json');
			}
		});
	}
}
</script>
	</head>

	<body>
		<table id="dg" class="easyui-datagrid"
			style="width: 550px; height: 250px" toolbar="#toolbar">
			<thead>
				<tr>
					<th field="id" width="50">
						编号
					</th>
					<th field="uname" width="50">
						用户名
					</th>
				</tr>
			</thead>
		</table>
		<div id="toolbar">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="newUser()">新增</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit"
				plain="true" onclick="eidtUser()">编辑</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove"
				plain="true" onclick="removeUser()">删除</a>
		</div>
		<div id="dlg" class="easyui-dialog"
			style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
			buttons="#dlg-buttons">
			<div class="ftitle">
				用户信息
			</div>
			<form id="fm" method="post">
				<div class="fitem">
					<label>
						用户名：
					</label>
					<input name="uname" class="easyui-validatebox" required="true">
				</div>
			</form>
		</div>
		<div id="dlg-buttons">
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
				onclick="saveUser()">Save</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
				onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
		</div>
	</body>
</html>
